<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{title}}</h1>
			<!-- 7.使用父组件 -->
			<parent></parent>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	<!-- 1.创建子组件的模板 -->
	<template id="c">
		<div>
			这是一个{{title}}的容器
			<p>这是从父组件接收到的数据a：{{a}} - {{typeof a}}</p>
			<p>这是从父组件接收到的数据b：{{b}} - {{typeof b}}</p>
			<p>这是从父组件接收到的数据c：{{c}} - {{typeof c}}</p>
			<p>这是从父组件接收到的数据d：{{d}} - {{typeof d}}</p>
			<p>这是从父组件接收到的数据e：{{e}} - {{typeof e}}</p>
			<p>这是从父组件接收到的数据f：{{f}} - {{typeof f}}</p>
		</div>
	</template>
	
	<!-- 3.创建父组件的模板 -->
	<template id="p">
		<div>
			<h2>这是一个{{title}}的容器</h2>
			<!-- 8.使用子组件 -->
			<child a="123" :b="say" :c="arr" d="123" :e="123" f="say"></child>
		</div>
	</template>
	
	<script type="text/javascript">
		// 2.创建子组件对象
		let child = {
			data:()=>{
				return {
					title:"子组件"
				}
			},
			// 查找对应的组件模板
			template: "#c",
			props:["a","b","c","d","e","f"]
		}
		// 4.创建父组件对象
		let parent = {
			data:()=>{
				return {
					title:"父组件",
					say:"hello - 来自父组件的问候",
					arr:["hello","world"]
				}
			},
			// 查找对应的组件模板
			template: "#p",
			// 6.注册子组件
			components:{
				child:child
			}
		}
		
		
		const vm1 = new Vue({
		    el:"#app",
			data:{
				title:"测试父子组件"
			},
			// 5.注册父组件
			components:{
				parent
			}
		});
	</script>
</html>
